<template>
<div class="container">
    <section class="header">
        <div class="tabs">
            <div class="item first" :class="{active: type==1}" @click="type=1">
                <p class="title">{{$t('fabi.main[0]')}} </p>
                <p class="text">{{activeCoin.code}}{{$t('fabi.main[2]')}}:{{activeCoin.cny_price}}CNY

                </p>
            </div>
            <div class="item" :class="{active: type==2}" @click="type=2">
                <p class="title">{{$t('fabi.main[1]')}}</p>
                <p class="text">{{activeCoin.code}}{{$t('fabi.main[2]')}}:{{activeCoin.cny_price}}CNY</p>
            </div>
        </div>
        <el-select v-model="coin" @change="changePage(1)">
            <el-option v-for="item in coinList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <!-- <el-button type="primary" @click="routerTo('/applyshop')" v-if="type == 1">{{$t('fabi.main[3]')}}</el-button>
      <el-button type="primary" @click="routerTo('/applyshop')"  v-else>{{$t('fabi.main[4]')}}</el-button> -->
    </section>
    <section class="trade_list" v-if="tradelist1.orders.data&&type==1">
        <el-table :data="tradelist1.orders.data" style="width: 100%">
            <el-table-column prop="name" :label="$t('fabi.main[5]')" align="center" width="250px">
                <template slot-scope="scope">
                    <div class="ava"><i class="el-icon-user-solid"></i></div>
                    <p class="name">{{Hidephone(scope.row.user.phone)}}</p>
                    <p class="info">{{$t('fabi.main[6]')}}{{scope.row.over_num-0}} | {{$t('fabi.main[7]')}}{{scope.row.over_rate}}%</p>
                </template>
            </el-table-column>
            <el-table-column prop="surplus_num" :label="$t('fabi.main[8]')" align="left"></el-table-column>
            <el-table-column prop="min_price" :label="$t('fabi.main[9]')" align="left">
                <template slot-scope="scope">
                    <span>{{scope.row.min_price}}-{{scope.row.max_price}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="price" :label="$t('fabi.main[10]')" align="left"></el-table-column>
            <el-table-column prop="name" :label="$t('fabi.main[11]')" align="left">
                <template slot-scope="scope">
                    <img src="../../assets/img/icon_weixin.png" v-for="item in scope.row.pay_method" v-if="item == 3" alt="">
                    <img src="../../assets/img/icon-alipay.png" v-for="item in scope.row.pay_method" v-if="item == 2" alt="">
                    <img src="../../assets/img/icon-yinlian.png" v-for="item in scope.row.pay_method" v-if="item == 1" alt="">
                </template>
            </el-table-column>
            <el-table-column prop="name" :label="$t('fabi.main[12]')" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="openDialog(scope.row)">{{$t('fabi.main[0]')}} </el-button>
                </template>
            </el-table-column>
        </el-table>
        <PagesSize :content="tradelist1.orders" @func="getData"></PagesSize>
    </section>
    <section class="trade_list" v-else-if="tradelist.orders.data">
        <el-table :data="tradelist.orders.data" style="width: 100%">
            <el-table-column prop="name" :label="$t('fabi.main[5]')" align="center" width="250px">
                <template slot-scope="scope">
                    <div class="ava"><i class="el-icon-user-solid"></i></div>
                    <p class="name">{{Hidephone(scope.row.user.phone)}}</p>
                    <p class="info">{{$t('fabi.main[6]')}}{{scope.row.over_num-0}} | {{$t('fabi.main[7]')}}{{scope.row.over_rate}}%</p>
                </template>
            </el-table-column>
            <el-table-column prop="surplus_num" :label="$t('fabi.main[8]')" align="left"></el-table-column>
            <el-table-column prop="min_price" :label="$t('fabi.main[9]')" align="left">
                <template slot-scope="scope">
                    <span>{{scope.row.min_price}}-{{scope.row.max_price}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="price" :label="$t('fabi.main[10]')" align="left"></el-table-column>
            <el-table-column prop="name" :label="$t('fabi.main[11]')" align="left">
                <template slot-scope="scope">
                    <img src="../../assets/img/icon_weixin.png" v-for="item in scope.row.pay_method" v-if="item == 3" alt="">
                    <img src="../../assets/img/icon-alipay.png" v-for="item in scope.row.pay_method" v-if="item == 2" alt="">
                    <img src="../../assets/img/icon-yinlian.png" v-for="item in scope.row.pay_method" v-if="item == 1" alt="">
                </template>
            </el-table-column>
            <el-table-column prop="name" :label="$t('fabi.main[12]')" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="openDialog(scope.row)">{{$t('fabi.main[1]')}}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <PagesSize :content="tradelist.orders" @func="changePage"></PagesSize>
    </section>
    <!-- 确认框 -->
    <el-dialog :title="$t('fabi.main1[0]')" width="40%" top="25vh" :visible.sync="showDialog">
        <div class="dialog_inner">
            <div class="top_tips">{{$t('fabi.main1[1]')}}{{chooseItem.min_price}}-{{chooseItem.max_price}} CNY</div>
            <div class="item">
                <div class="label">{{$t('fabi.main1[2]')}}</div>
                <div class="input">
                    <input type="number" :placeholder="$t('fabi.main1[3]')" v-model="money" @input="calNumber">
                    <span>CNY</span>
                </div>
            </div>
            <div class="item">
                <div class="label">{{$t('fabi.main1[4]')}}</div>
                <div class="input">
                    <input type="number" :placeholder="$t('fabi.main1[5]')" v-model="number" @input="calMoney">
                    <span>{{chooseItem.code}}</span>
                </div>
            </div>
            <!-- <div class="middle_tips">实际购买：-- {{activeCoin.code}}</div> -->
            <div class="payway">
                <div class="label">{{$t('fabi.main1[6]')}}</div>
                <div class="tabs">
                    <div class="tab_item" v-if="bank" :class="{active:tabIndex==1}" @click="tabIndex=1">
                        <img src="../../assets/img/icon-yinlian.png" alt="">{{$t('fabi.main1[7]')}}
                    </div>
                    <div class="tab_item" v-if="ali" :class="{active:tabIndex==2}" @click="tabIndex=2">
                        <img src="../../assets/img/icon-alipay.png" alt="">{{$t('fabi.main1[8]')}}
                    </div>
                    <div class="tab_item" v-if="weixin" :class="{active:tabIndex==3}" @click="tabIndex=3">
                        <img src="../../assets/img/icon_weixin.png" alt="">{{$t('fabi.main1[9]')}}
                    </div>
                </div>
            </div>
            <div class="item" v-if="chooseItem.order_type == 2">
                <div class="label">{{$t('fabi.main1[10]')}}</div>
                <div class="input">
                    <input type="password" :placeholder="$t('fabi.main1[11]')" v-model="password">
                    <!-- <span>CNY</span> -->
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">{{timeout}}{{$t('fabi.main1[12]')}}</el-button>
                <el-button type="primary" @click="submit()">{{$t('fabi.main1[13]')}}</el-button>
            </div>
        </div>
    </el-dialog>
</div>
</template>

<script>
import {
    Hidephone,
    Passwordencryption,
    getToken
} from "@/libs/util";
import {
    market
} from "@/api/fabitransaction";
import {
    trading,
    createorder
} from "@/api/fbTrade";

import PagesSize from "_dom/paging";

import {
    details
} from "@/api/user";

export default {
    name: 'fabitransaction',
    data() {
        return {
            type: 1,
            tradelist: {
                usdt_cny: 0,
                orders: {
                    total: 0,
                    data: []
                }
            },
            tradelist1: {
                usdt_cny: 0,
                orders: {
                    total: 0,
                    data: []
                }
            },
            showDialog: false,
            timeout: 45,
            chooseItem: {
                price: 1,
                pay_method: []
            },
            money: '',
            number: '',
            password: '',
            tabIndex: 1,
            isShop: 0,
            coinList: [],
            coin: ''
        }
    },
    computed: {
        bank() {
            for (let item of this.chooseItem.pay_method) {
                if (item == 1) return true
            }
            return false
        },
        ali() {
            for (let item of this.chooseItem.pay_method) {
                if (item == 2) return true
            }
            return false
        },
        weixin() {
            for (let item of this.chooseItem.pay_method) {
                if (item == 3) return true
            }
            return false
        },
        activeCoin() {
            return this.coinList.find(item => item.value == this.coin) || {}
        }
    },
    components: {
        PagesSize
    },
    created() {
        if (getToken('token')) {
            details().then(res => {
                this.isShop = res.config.fbshop
            })
        }

        this.market(() => {
            this.getData(1, 1)
            this.getData(2, 1)
        })
    },
    methods: {
        changePage(idx) {
            this.getData(this.type, idx)
        },
        routerTo(path) {
            this.$router.push(path)
        },
        getData(type, page) {
            let data = {
                order_type: type || this.type,
                page: page || this.page,
                wid: this.coin
            }
            trading(data).then(res => {

                if (type == 2) {
                    this.tradelist = res
                } else {
                    this.tradelist1 = res
                }

            })
        },
        Hidephone(data) {
            return Hidephone(data)
        },
        openDialog(item) {
            if (item.user.account == this.$store.state.user.account) {
                this.$message.error(this.$t('fabi.Tips[2]'))
                return
            }
            this.chooseItem = item
            this.money = ''
            this.number = ''
            this.password = ''
            this.showDialog = true
            // 倒计时关闭
            clearInterval(this.timer)
            this.timer = null;
            this.timeout = 45
            this.timer = setInterval(() => {
                this.timeout--
                if (this.timeout == 0) {
                    this.showDialog = false
                    clearInterval(this.timer)
                }
            }, 1000)
        },
        calNumber(e) {
            if (this.money) {
                this.number = (this.money / this.chooseItem.price).toFixed(6)
            } else {
                this.number = ''
            }
        },
        calMoney(e) {
            if (this.number) {
                this.money = (this.chooseItem.price * this.number).toFixed(2) - 0
            } else {
                this.money = ''
            }
        },
        submit() {
            if (Number(this.number) > Number(this.chooseItem.surplus_num)) {
                this.$message.error(this.$t('fabi.Tips[0]'));
                return false;
            } else if (Number(this.money) > Number(this.chooseItem.max_price) || Number(this.money) < Number(this.chooseItem.min_price)) {
                this.$message.error(this.$t('fabi.Tips[1]') + this.chooseItem.min_price + '-' + this.chooseItem.max_price);
                return false;
            } else {
                let data = {
                    order_type: this.type,
                    total_num: this.number,
                    total_price: this.money,
                    order_no: this.chooseItem.order_no,
                    pay_method: this.tabIndex,
                    payment_password: this.password
                }
                
                createorder(Passwordencryption(data)).then(res => {

                    this.$message.success("创建订单成功");
                    this.$router.push('/fabiorderdetail?order_no=' + res.order_no)

                })
            }

        },
        // 获取市场币种
        async market(call) {
            let res = await market();
            this.coinList =res.map(item => ({
                label: item.code,
                value: item.wid,
                ...item
            }))
            if (this.coinList.length) this.coin = this.coinList[0].value
            call()
        },
    }
}
</script>

<style lang="less" scoped>
.container {
    min-height: 70vh;
    overflow: hidden;
    width: 980px;
    margin: 0 auto;
    color: #8E8E93;

    .header {
        margin: 30px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .tabs {
            display: flex;

            .item {
                cursor: pointer;

                .title {
                    font-size: 18px;
                    margin-bottom: 20px;
                }
            }

            .active .title {
                color: #6185E5;
            }

            .first {
                padding-right: 55px;
                border-right: 1px solid #E5E5EA;
                margin-right: 55px;
            }
        }
    }

    .pagination {
        width: 100%;
    }

    .dialog_inner {
        .top_tips {
            text-align: right;
            color: #fff;
        }

        .item {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;

            .label {
                width: 23%;
                color: #fff;
                font-size: 16px;
                line-height: 50px;
            }

            .input {
                flex: 1;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;
                background-color: #131C28;

                input {
                    width: 80%;
                    height: 50px;
                    background-color: #131C28;
                    border-radius: 4px;
                    color: #fff;
                    font-size: 16px;
                }
            }
        }

        .payway .label {
            color: #fff;
            font-size: 16px;
            line-height: 50px;
        }

        .middle_tips {
            text-align: right;
            line-height: 40px;
        }

        .tabs {
            display: flex;
            justify-content: space-between;

            .tab_item {
                width: 30%;
                height: 42px;
                line-height: 42px;
                background: rgba(19, 28, 40, 1);
                text-align: center;
                cursor: pointer;

                &.active {
                    border: 1px solid #6185E5;
                }

                img {
                    vertical-align: middle;
                    margin-right: 10px;
                }
            }
        }

        .dialog-footer {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;

            button {
                width: 40%;
            }
        }
    }
}
</style>
